<template>
  <div ref="animatedBox" class="animated-box visible">
    <div style="display: flex; justify-content: flex-end">
      <!-- <svg
        width="106.000000"
        height="26.000000"
        viewBox="0 0 100 41"
        version="1.1"
        xml:space="preserve"
        inkscape:version="1.4 (86a8ad7, 2024-10-11)"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg"
      >
        <sodipodi:namedview
          id="namedview1"
          pagecolor="#ffffff"
          bordercolor="#000000"
          borderopacity="0.25"
          inkscape:showpageshadow="2"
          inkscape:pageopacity="0.0"
          inkscape:pagecheckerboard="0"
          inkscape:deskcolor="#d1d1d1"
          inkscape:document-units="mm"
          inkscape:zoom="0.43295455"
          inkscape:cx="360.31496"
          inkscape:cy="242.51969"
          inkscape:window-width="1280"
          inkscape:window-height="730"
          inkscape:window-x="-6"
          inkscape:window-y="-6"
          inkscape:window-maximized="1"
          inkscape:current-layer="svg1"
          showguides="true"
        />
        <defs id="defs1" />
        <sodipodi:namedview />
        <defs id="defs1" />
        <path
          stroke="#303030"
          stroke-width="1"
          ref="signaturePathRef"
          id="signaturePath"
          d="m 47.962022,37.558567 c -0.73076,-0.29443 -1.14174,-1.05419 -1.14174,-2.11056 0,-2.32405 2.25903,-3.98837 8.06973,-5.94536 1.60077,-0.53911 3.05028,-1.15976 3.22118,-1.37924 0.42304,-0.54324 0.93366,-3.71199 0.82851,-5.14126 l -0.0851,-1.16444 -0.52688,0.89291 c -1.68024,2.84801 -3.96107,5.06021 -5.21716,5.06021 -0.84986,0 -2.0562,-1.42258 -2.05816,-2.42704 l -0.002,-0.88025 -1.08307,1.26368 c -1.25845,1.46826 -2.42001,2.15062 -3.28912,1.93246 -1.81898,-0.45651 -1.95917,-2.46601 -0.37998,-5.44185 1.22578,-2.30964 1.34829,-3.04355 0.46127,-2.762 -1.51318,0.48026 -3.79803,3.02955 -5.63714,6.28961 -0.941805,1.66922 -1.168616,1.90291 -1.918261,1.97601 -0.925024,0.0902 -0.988132,0.007 -0.57784,-0.75916 0.233963,-0.43695 0.13476,-0.41571 -0.698303,0.14969 -1.225993,0.83195 -2.068196,0.8347 -2.893472,0.009 -0.955897,-0.95589 -0.834182,-2.04827 0.664956,-5.96868 0.722914,-1.89049 1.24597,-3.61557 1.162334,-3.83353 -0.119875,-0.31233 0.07794,-0.39627 0.934505,-0.39627 0.771721,0 1.086643,0.11094 1.086643,0.38273 0,0.21051 -0.679116,1.90715 -1.509241,3.77031 -1.164092,2.61282 -1.512052,3.69014 -1.521347,4.7105 -0.01074,1.24375 0.0307,1.32785 0.701706,1.4053 1.230733,0.14205 2.411689,-1.28716 4.65181,-5.62979 2.08047,-4.03296 2.85654,-4.94181 3.88345,-4.54774 0.43203,0.16579 0.43596,0.22582 0.0497,0.77183 -0.64058,0.90621 -2.81676,4.64596 -2.81676,4.84056 0,0.0947 0.93466,-0.70711 2.07685,-1.7817 1.96223,-1.84585 4.77803,-3.65742 5.68495,-3.65742 0.30659,0 -0.04,0.92536 -1.35208,3.63241 -1.44605,2.9788 -1.76497,3.87145 -1.77141,4.96093 -0.007,1.16264 0.0614,1.3387 0.56319,1.40993 0.90559,0.12904 2.2944,-1.50189 3.83822,-4.50717 2.78801,-5.42781 6.05179,-7.38927 9.15049,-5.49922 0.47289,0.28848 0.85983,0.70485 0.85983,0.92527 0,0.61582 -0.41003,0.47585 -0.74226,-0.25339 -0.65125,-1.42923 -2.46346,-1.0986 -4.4243,0.80721 -2.71283,2.63652 -4.59218,6.91572 -3.51178,7.99611 1.14119,1.14122 3.7098,-1.10528 5.50547,-4.81503 0.90735,-1.87451 1.2083,-2.2758 1.7073,-2.2758 0.46672,0 0.64365,0.18971 0.77107,0.82682 0.24847,1.24229 0.1837,2.78874 -0.2091,4.99401 -0.19438,1.09141 -0.30701,2.03577 -0.25022,2.09859 0.1617,0.17863 1.92924,-1.61347 2.46134,-2.49546 0.2633,-0.43656 0.55814,-1.42559 0.65507,-2.19783 0.34231,-2.72681 2.38914,-7.31034 4.25459,-9.52716 0.36408,-0.43275 0.65963,-0.88869 0.65683,-1.01321 -0.003,-0.12451 -0.60697,-0.58357 -1.3422,-1.02013 -0.73531,-0.43657 -1.56638,-1.165 -1.84683,-1.6187303 -0.6157,-0.99606 -0.66076,-2.45779 -0.0973,-3.15935 0.38478,-0.47919 0.40229,-0.43385 0.26263,0.67703 -0.11455,0.91419 -0.0322,1.36962 0.36223,1.96156 0.56743,0.85464 2.52649,2.2717803 3.1404,2.2717803 0.21665,0 1.30003,-0.86342 2.40765,-1.9187003 4.15724,-3.96096 8.97228,-6.26099 13.14429,-6.27879 4.72386,-0.0202 7.17567,3.85586 4.38948,6.9396803 -1.14686,1.26961 -2.89577,2.18018 -5.55745,2.89358 -2.63109,0.70524 -8.58048,0.79283 -11.11234,0.16359 l -1.67882,-0.41726 -1.39794,2.15322 c -5.15445,7.9401 -5.64498,13.39801 -1.2041,13.39801 3.49478,0 9.90635,-5.64603 13.8799,-12.22268 1.15983,-1.91978 1.91595,-2.57717 2.52855,-2.19857 0.57143,0.35316 0.21136,1.41179 -1.08246,3.18212 -2.26586,3.10074 -3.52113,6.00005 -3.80823,8.79655 -0.20539,2.00155 0.20179,2.81084 1.46868,2.91817 0.69245,0.0587 1.2061,-0.12201 2.01711,-0.70951 1.54359,-1.11821 2.29548,-2.20394 4.56515,-6.59338 2.03811,-3.94138 2.82134,-4.85022 3.84224,-4.45847 0.43205,0.16579 0.43581,0.22582 0.0486,0.77183 -0.64056,0.90621 -2.81677,4.64596 -2.81677,4.84056 0,0.0947 0.93462,-0.70711 2.07704,-1.7817 1.96212,-1.84585 4.77788,-3.65742 5.68478,-3.65742 0.30668,0 -0.0395,0.92536 -1.35206,3.63241 -1.44611,2.9788 -1.7649,3.87145 -1.77145,4.96093 -0.007,1.16264 0.0615,1.3387 0.56317,1.40993 0.80302,0.1144 2.22532,-1.38959 3.5172,-3.71906 1.24521,-2.24543 1.42379,-2.20583 0.27908,0.0619 -1.39335,2.76028 -3.30691,4.46118 -4.64215,4.12609 -1.81875,-0.45651 -1.95912,-2.46601 -0.37988,-5.44185 1.22573,-2.30964 1.34824,-3.04355 0.46121,-2.762 -1.51126,0.47966 -3.79114,3.02205 -5.64061,6.28961 -0.99882,1.76484 -1.1337,1.89449 -1.98965,1.91351 -0.58822,0.0131 -1.33582,0.3229 -2.0801,0.86207 -3.34208,2.42098 -5.57139,1.47283 -5.5735,-2.37057 -5.6e-4,-0.96397 0.17225,-2.24389 0.38413,-2.84427 0.2119,-0.60038 0.35111,-1.0916 0.30979,-1.0916 -0.0429,0 -1.0365,0.93539 -2.21087,2.07865 -3.7424,3.64315 -6.96035,5.32213 -9.47713,4.94471 -1.52447,-0.2286 -2.646,-1.28836 -3.04641,-2.87855 l -0.3083,-1.22451 -1.17236,1.30392 c -0.64479,0.71715 -1.37537,1.3692 -1.62355,1.44899 -0.24812,0.0798 -0.9778,1.17736 -1.62155,2.43905 -2.69292,5.27816 -7.54992,8.53503 -10.78472,7.23173 z m 3.56772,-1.07174 c 0.9814,-0.49044 2.10633,-1.34995 2.85695,-2.18281 1.56679,-1.73888 3.62615,-4.78669 3.30622,-4.89335 -0.41199,-0.13731 -4.27396,1.24477 -6.579,2.35445 -1.64389,0.79133 -2.38483,1.32436 -2.97662,2.14124 -0.82811,1.14302 -1.03669,2.50569 -0.47035,3.07197 0.55603,0.55596 2.18007,0.34929 3.8628,-0.4915 z m 30.32307,-23.91651 c 4.47868,-0.85691 6.75772,-2.7256503 6.81517,-5.5881303 0.0477,-2.24951 -1.59762,-3.18657 -5.17941,-2.95439 -3.75048,0.2431 -6.47773,1.71837 -10.2761,5.55871 -1.27337,1.2873703 -2.31512,2.4436003 -2.31512,2.5694003 0,0.74416 7.7082,1.03573 10.95546,0.41441 z M 5.7160632,28.801007 c -2.068076,-0.48591 -3.345996,-2.13249 -2.932796,-3.77881 0.250564,-0.99833 1.746953,-2.19457 3.012722,-2.40842 1.144544,-0.19337 3.717911,0.27659 3.717911,0.67898 0,0.1274 -0.305401,0.11553 -0.678687,-0.0264 -1.396335,-0.53089 -2.487997,-0.31928 -3.482293,0.67503 -0.824788,0.82479 -0.914819,1.04554 -0.775764,1.90241 0.267153,1.64623 0.92718,2.05932 3.290448,2.05932 2.5628818,0 3.9252198,-0.61801 6.3381988,-2.87522 2.115475,-1.97893 3.108941,-3.43159 5.819461,-8.5093 3.355737,-6.28648 5.506559,-9.5416803 7.586475,-11.4819203 0.378191,-0.35279 0.687612,-0.73974 0.687612,-0.85989 0,-0.3182 -6.752256,-0.26751 -9.175142,0.0689 -4.211765,0.58475 -8.711299,2.46691 -10.8699518,4.54693 -1.154563,1.11251 -1.915364,2.7562003 -1.915364,4.1381203 0,4.22248 5.3014698,4.68254 7.6024398,0.65974 0.53603,-0.93714 0.591366,-0.97125 0.595311,-0.36699 0.0066,0.97554 -1.137207,2.49426 -2.294594,3.04729 -0.554596,0.265 -1.60367,0.52793 -2.3312788,0.58428 -1.658456,0.12844 -3.422252,-0.70807 -4.319916,-2.0488 -0.533165,-0.79631 -0.607312,-1.1855 -0.529349,-2.77812 0.07806,-1.59228 0.212248,-2.02131 0.957249,-3.0584103 0.965106,-1.34351 3.39872,-3.03814 5.6118128,-3.90776 4.116018,-1.61734 10.51186,-2.45497 14.920979,-1.95413 l 2.596362,0.29493 1.439852,-0.8126 c 1.732709,-0.97788 2.076771,-0.8492 0.719911,0.26924 -0.882382,0.72734 -0.933194,0.83255 -0.476636,0.9871 2.831133,0.95834 5.333267,2.66114 6.105957,4.1553 1.0783,2.0853603 0.06155,5.0534103 -2.518314,7.3530703 -2.87979,2.56672 -6.6668,4.0085 -11.451254,4.3597 l -2.477879,0.18189 -1.452916,1.97884 c -4.085324,5.56411 -8.763517,7.99642 -13.3205668,6.92571 z M 26.027484,18.608857 c 5.848304,-1.49487 10.608442,-6.67065 9.427081,-10.2502003 -0.413019,-1.25148 -2.004962,-2.62973 -3.823225,-3.31003 -0.824863,-0.30862 -1.584581,-0.55959 -1.688262,-0.55771 -0.289376,0.005 -2.405526,3.39525 -4.952707,7.9340803 -1.265813,2.25557 -2.646482,4.64725 -3.068136,5.31483 -0.421661,0.66758 -0.766644,1.30804 -0.766644,1.42324 0,0.27814 2.911088,-0.053 4.871893,-0.55421 z m 12.643564,-4.12011 c -0.771222,-0.77125 0.197676,-2.2718 1.251019,-1.93748 0.690556,0.21918 0.725869,1.21832 0.06276,1.8171 -0.574823,0.52016 -0.88695,0.54873 -1.315341,0.12038 z"
        />
      </svg> -->
      <svg
        version="1.1"
        id="svg1"
        width="85.769997"
        height="26.722"
        viewBox="0 0 171.53999 53.444"
        sodipodi:docname="signature (3).svg"
        inkscape:version="1.4 (86a8ad7, 2024-10-11)"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg"
      >
        <defs id="defs1" />
        <sodipodi:namedview
          id="namedview1"
          pagecolor="#ffffff"
          bordercolor="#000000"
          borderopacity="0.25"
          inkscape:showpageshadow="2"
          inkscape:pageopacity="0.0"
          inkscape:pagecheckerboard="0"
          inkscape:deskcolor="#d1d1d1"
          showgrid="false"
          inkscape:zoom="1.0134146"
          inkscape:cx="410"
          inkscape:cy="99.663057"
          inkscape:window-width="1280"
          inkscape:window-height="730"
          inkscape:window-x="-6"
          inkscape:window-y="-6"
          inkscape:window-maximized="1"
          inkscape:current-layer="svg1"
        />
        <path
          d="m 37.671756,47.161124 c -6.97132,-5.009428 10.67063,-40.980551 20.9192,-42.6532775 1.34332,-0.2192504 3.73276,0.081409 5.57768,0.7018283 2.9946,1.0070372 3.18918,1.2717472 2.69522,3.6666592 -0.66171,3.208189 -5.00771,7.921767 -14.70557,15.949338 -10.95934,9.071782 -11.00898,9.137271 -11.69105,15.42249 -0.63811,5.880066 0.31734,7.853775 3.42636,7.077937 1.05506,-0.263281 1.34738,-0.140745 0.86787,0.363806 -1.13101,1.190069 -5.11077,0.893236 -7.08971,-0.528781 z m 16.53846,-26.159505 c 5.83906,-5.511199 10.91669,-11.712843 10.93645,-13.357412 0.0189,-1.572726 -2.87834,-0.786759 -5.99289,1.625757 -3.16861,2.454389 -12.80201,14.787963 -14.85704,19.021363 l -1.10487,2.27606 2.50872,-1.950909 c 1.3798,-1.073 5.20913,-4.499686 8.50963,-7.614859 z M 86.60015,47.614366 c -0.30264,-0.512862 -0.0918,-4.411923 0.46843,-8.664577 0.91236,-6.925133 0.42747,-11.954987 -1.25817,-13.051161 -1.1146,-0.72483 -2.703144,0.617179 -2.127264,1.797124 0.455824,0.933942 0.12472,1.245878 -1.32241,1.245878 -1.6588,0 -2.00504,0.604037 -2.46027,4.292056 -1.04564,8.471129 -8.34249,14.566731 -17.43737,14.566731 -6.07266,0 -9.30666,-2.096245 -9.30666,-6.032478 0,-3.247432 2.47723,-8.483098 4.54065,-9.596733 0.99429,-0.536622 1.22254,-1.570395 0.7948,-3.599785 -0.42557,-2.019095 -0.14792,-3.295714 0.95478,-4.390137 3.58165,-3.554746 12.85654,-3.877991 16.65556,-0.580473 4.52434,3.927106 5.47855,4.241363 6.34396,2.089304 0.68716,-1.708817 5.050734,-1.729494 7.654474,-0.03627 2.39929,1.56026 3.35708,4.667488 2.90275,9.416925 -0.19083,1.994949 -0.12197,3.619236 0.15303,3.609525 0.275,-0.0097 2.05594,-1.508714 3.95765,-3.331119 5.08001,-4.868168 16.53336,-12.615681 20.05074,-13.563136 4.20456,-1.132559 5.13907,-0.193381 1.48978,1.497235 -5.46809,2.533222 -15.37212,9.020826 -18.99856,12.444944 -1.96617,1.856479 -4.83883,5.405354 -6.38368,7.886384 -2.73087,4.385761 -5.47408,6.030223 -6.67222,3.999768 z M 67.433026,45.602049 c 4.53186,-2.731267 8.02659,-8.075578 8.13044,-12.433449 0.0888,-3.726365 -0.0129,-3.894308 -2.2623,-3.734781 -1.29539,0.09187 -3.76551,0.820065 -5.48916,1.618209 -2.50004,1.157662 -2.78214,1.495224 -1.39473,1.668978 0.95654,0.119794 1.73916,0.520711 1.73916,0.890925 0,0.372864 -1.00365,0.510001 -2.25,0.307438 -1.7597,-0.285995 -2.72114,0.102777 -4.4121,1.784088 -7.26806,7.226613 -2.58353,15.034767 5.93869,9.898592 z m -0.76144,-18.023102 c 5.94884,-2.183275 6.51027,-2.786801 3.55059,-3.816861 -4.5871,-1.596455 -8.26624,-0.162307 -9.5339,3.716362 -0.37991,1.162417 -0.42318,2.113485 -0.0961,2.113485 0.32704,0 3.06279,-0.905843 6.07946,-2.012986 z M 111.62172,47.86522 c -3.45062,-0.965999 -4.65931,-2.494282 -4.61944,-5.840912 0.0855,-7.175996 12.82557,-18.285102 20.96964,-18.285102 2.98835,0 7.18452,2.495267 7.18452,4.272295 0,2.246916 -6.31274,6.504602 -11.58587,7.8142 -6.20292,1.540514 -6.64642,0.697252 -0.66922,-1.272436 5.33718,-1.758777 8.29442,-4.078215 8.57705,-6.727178 0.31074,-2.912584 -2.32862,-2.400257 -8.33842,1.618573 -8.6782,5.803219 -14.04977,13.6771 -10.97444,16.086824 3.23591,2.535558 10.08102,0.311222 19.85101,-6.450633 2.94805,-2.040365 5.55708,-3.58166 5.79783,-3.425101 0.73981,0.481101 -8.97424,8.327915 -12.80696,10.345208 -3.83401,2.017974 -9.84581,2.855254 -13.3857,1.864262 z"
          stroke="#303030"
          stroke-width="1"
          ref="signaturePathRef"
          id="signaturePath"
        />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
const animatedBox = ref();
const signaturePathRef = ref(null);
</script>

<style lang="scss" scoped>
.animated-box {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animated-box.visible {
  opacity: 1; /* 出现时可见 */
  transform: translateY(0); /* 恢复到正常位置 */
}
#signaturePath {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  fill: transparent;
  animation: drawSignature 5s linear infinite;
}
.animateSignature {
  animation: drawSignature 5s linear infinite; /* 使用 'forwards' 保证动画结束后保持最终状态 */
}
@keyframes drawSignature {
  0% {
    stroke-dashoffset: 2400;
  }

  15% {
    fill: transparent;
  }

  35%,
  75% {
    stroke-dashoffset: 0;
    fill: #303030; //v-bind(logoColor);
  }

  90%,
  100% {
    stroke-dashoffset: 2400;
    fill: transparent;
  }
}
</style>
